<template>
  <div class="body">
    <PageHeader subTitle="返回" @back="$router.go(-1)">
      下发合同模板
    </PageHeader>
    <div class="content">
      <div class="title">
        选择用工单位
      </div>
      <div style="padding:24px 0 40px 0">
        <a-button>选择单位</a-button>
        <span style="font-size:14px;font-weight:400;color:#767885;margin-left:24px">已选择等0家</span>
      </div>
      <div class="title">
        选择合同模板
      </div>
      <div v-for="(item, index) in contractData" :key="index">
        <div style="font-size:14px;font-weight:400;color:#767885;margin-top:24px">
          {{ item.name }}
        </div>
        <div style="display:flex;flex-wrap:wrap;">
          <div
            :class="item.selected ? 'templateSelected' : 'template'"
            v-for="(item, index) in item.categoryListVOList"
            :key="index"
            @click="selectedItem(item)"
            style="position:relative"
          >
            <div v-if="item.selected" class="selectedIcon">
              <a-icon type="check" style="position:absolute;top:-34px;left:3px;color:#fff" />
            </div>
            <div style="position:absolute;top:46px;left:66px">
              <img :src="templateIcon" alt="" style="width:60px;height:60px" />
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <a-button type="primary" @click="handleOk">确认</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { selectTreeBySubjectId } from "../../api";
export default {
  components: {},
  data() {
    return {
      contractData: [],
      templateIcon: require("@/assets/img/overview/templateIcon.png")
    };
  },
  watch: {},
  created() {
    this.selectTreeBySubjectId();
  },
  methods: {
    handleOk() {},
    selectTreeBySubjectId() {
      selectTreeBySubjectId({
        subjectId: "0"
      })
        .then(res => {
          this.contractData = res.data;
          this.contractData.forEach((item, index) => {
            item.categoryListVOList.forEach(item2 => {
              item2.selected = false;
            });
          });
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    selectedItem(item) {
      item.selected = !item.selected;
      this.contractData = JSON.parse(JSON.stringify(this.contractData));
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 40px 176px;
  .title {
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    color: #3c3d43;
    border-left: 4px solid var(--primary);
    height: 16px;
    padding-left: 7px;
  }
  .template {
    width: 200px;
    height: 154px;
    background: rgba(255, 255, 255, 0);
    border-radius: 4px;
    margin-top: 12px;
    border: 1px solid #d9d9d9;
    margin-right: 12px;
    cursor: pointer;
  }
  .template:hover {
    border: none;
    box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  }
  .templateSelected {
    width: 200px;
    height: 154px;
    background: rgba(255, 255, 255, 0);
    border-radius: 4px;
    margin-top: 12px;
    border: 2px solid var(--primary);
    margin-right: 12px;
    cursor: pointer;
  }
  .selectedIcon {
    width: 0;
    height: 0;
    border-top: 36px solid var(--primary);
    border-right: 36px solid transparent;
    position: relative;
    left: 0;
    top: -1px;
    left: -1px;
  }
  .bottom {
    display: flex;
    justify-content: center;
    padding: 24px 0 0 0;
  }
}
</style>
